import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yp/config/config.dart';
import 'package:yp/pages/mall_app/account_safe_phone/state.dart';
import 'package:yp/router.dart';

import '../../../helper.dart';
import 'logic.dart';

class ModifyPhonePage extends StatelessWidget {
  final logic = Get.put(ModifyPhoneLogic());
  final ModifyPhoneState state = Get.find<ModifyPhoneLogic>().state;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Config.mainColor,
        title: Text(
          "填写验证码",
          style: TextStyle(
            color: Colors.white,
            fontSize: setWidth(34),
          ),
        ),
        centerTitle: true,
        elevation: 0,
      ),
      backgroundColor: Colors.white,
      body: Padding(
          padding: EdgeInsets.symmetric(
              horizontal: setWidth(30), vertical: setWidth(40)),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Icon(
                    Icons.check_circle,
                    size: setWidth(50),
                    color: Config.mainColor,
                  ),
                  SizedBox(
                    width: setWidth(20),
                  ),
                  Text(
                    '已通过验证',
                    style: TextStyle(
                        color: Color(0xff222222), fontSize: setWidth(26)),
                  ),
                ],
              ),
              SizedBox(
                height: setWidth(50),
              ),
              Text(
                '请输入手机号',
                style:
                    TextStyle(color: Color(0xffcdcdcd), fontSize: setWidth(24)),
              ),
              Container(
                height: setWidth(100),
                alignment: Alignment.centerLeft,
                child: TextField(
                  controller: state.phoneCtrl,
                  // textAlignVertical: TextAlignVertical.center,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    filled: true,
                    contentPadding: EdgeInsets.zero,
                    hintStyle: TextStyle(
                        color: Color(0xffcdcdcd), fontSize: setWidth(24)),
                    labelStyle: TextStyle(
                        color: Color(0xff222222), fontSize: setWidth(24)),
                    hintText: '请输入11位手机号',
                    fillColor: Colors.white,
                    enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffeeeeee))),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffeeeeee))),
                  ),
                ),
              ),
              SizedBox(
                height: setWidth(50),
              ),
              Text(
                '验证码',
                style:
                    TextStyle(color: Color(0xffcdcdcd), fontSize: setWidth(24)),
              ),
              Container(
                height: setWidth(100),
                alignment: Alignment.centerLeft,
                child: TextField(
                  autofocus: false,
                  controller: state.codeCtrl,
                  textAlignVertical: TextAlignVertical.center,
                  focusNode: state.focusNode,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                      filled: true,
                      contentPadding: EdgeInsets.zero,
                      hintStyle: TextStyle(
                          color: Color(0xffcdcdcd), fontSize: setWidth(24)),
                      labelStyle: TextStyle(
                          color: Color(0xff222222), fontSize: setWidth(24)),
                      hintText: '请输入验证码',
                      fillColor: Colors.white,
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Color(0xffeeeeee))),
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Color(0xffeeeeee))),
                      suffixIcon: Container(
                          // height: setWidth(60),
                          width: setWidth(180),
                          margin: EdgeInsets.symmetric(vertical: setWidth(15)),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(setWidth(30)),
                              border: Border.all(color: Color(0xffeeeeee))),
                          alignment: Alignment.center,
                          child: InkWell(onTap: () {
                            state.focusNode.unfocus();
                            state.focusNode.canRequestFocus = false;
                            Future.delayed(Duration(milliseconds: 100), () {
                              state.focusNode.canRequestFocus = true;
                            });
                            if (state.verifyEnable) {
                              //获取验证码
                              logic.sendSms();
                            }
                          }, child:
                              GetBuilder<ModifyPhoneLogic>(builder: (logic) {
                            return Text(
                              state.verifyText,
                              style: TextStyle(
                                  color: state.verifyEnable
                                      ? Colors.blue
                                      : Color(0xffcdcdcd),
                                  fontSize: setWidth(26)),
                            );
                          })))),
                ),
              ),
              SizedBox(
                height: setWidth(60),
              ),
              Center(
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(setWidth(45)),
                    child: Container(
                      width: setWidth(660),
                      height: setWidth(90),
                      child: TextButton(
                          onPressed: () {
                            logic.submit();
                          },
                          style: TextButton.styleFrom(
                              backgroundColor: Config.mainColor),
                          child: Text(
                            '提交',
                            style: TextStyle(
                                color: Colors.white, fontSize: setWidth(28)),
                          )),
                    )),
              )
            ],
          )),
    );
  }
}
